<template>
  <div style="width: 100%">
    <el-container>
      <!-- 头部 -->
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown trigger="click">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><span @click="fn_quit">退出登录</span></el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span>小明</span>
      </el-header>

      <!-- 内容表格 -->

      <el-main>
        <el-table
          :data="tableData"
          stripe
          height="500"
          @selection-change="fnchange"
        >
          <!-- 为每一项添加一个多选框 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="name" width="120">
          </el-table-column>
          <el-table-column prop="age" label="age" width="140">
          </el-table-column>

          <el-table-column prop="address" label="address"> </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import instance from "../api";
export default {
  name: "All",
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        name: "",
        date: "",
        address: "",
      },
      formLabelWidth: "50px",
    };
  },
  methods: {
    fn_quit() {
      this.$router.push({ name: "Xin" });
    },
    fnchange(val) {
      console.log(val);
    },
    // 数据请求
    async fn_all() {
      let { data } = await instance.get("tables");
      this.tableData = data;
    },
  },
  created() {
    this.fn_all();
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
</style>